<%@page import="java.security.Principal" %>
<%@page import="waffle.windows.auth.WindowsAccount" %>
<%@page import="waffle.servlet.WindowsPrincipal" %>
<%@page import="com.sun.jna.platform.win32.Secur32" %>
<%@page import="com.sun.jna.platform.win32.Secur32Util" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Laundry : Book a slot</title>
<link href="js/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="js/jquery.min.js"></script>
  <script src="js/jquery-ui.min.js"></script>
  
  <script>
  $(document).ready(function() {
    $("#datepicker").datepicker({ onSelect: function(dateText, inst) { execWs(dateText); } });
    $('#MyBookings').hide(); 
    getUser();
  });
  function execWs(dateText){
	  //alert(dateText);


	  var requestUrl ="rest/book/free?when="+dateText;            
      $.getJSON(requestUrl,
      function(data) {
    	  $('option', $('#slots')).remove()
    	  //alert(data[1].slot.from );    
    	  //$('#slots').append('<option value="'+data[0].slot.id+'" >'+data[0].slot.from+'-'+data[0].slot.to+'</option>');
          for(var i=0;i<data.length;i++){   
        	      	  
        	  $('#slots').append('<option value="'+data[i].slot.id+'" >'+data[i].slot.from+'-'+data[i].slot.to+' ( '+data[i].count+' )'+'</option>');     	
         }
          if(data.length==0){
        	  $('#slots').append('<option value="-1" >No free slots</option>');
          }                  	                                            
      });
     
  }

  function bookASlot(){
	  var emp=$('#userId').text();
	  //alert(emp);
	  var slot=$('#slots').val();
	  var dtText =$("#datepicker").val();
	  //alert($("#datepicker").val());
	  var requestUrl ="rest/book/bookslot?dt="+dtText;
	  requestUrl+="&slot="+slot+"&emp="+emp;
	  $.getJSON(requestUrl,function(data){ 
				alert(" Machine id Booked : "+data.id)
				execWs(dtText);
		  });
  }

  function getMyBookings(){	  
	  $('#MyBookings').show();
	  $('#loading').attr('src','img/ajax-loader.gif');
	  var requestUrl ="rest/book/bookings?eId="+$('#userId').text();
	  $.getJSON(requestUrl,function(data){ 
		if(data.length!=0){
			$('#MyBookings').html('<table border="1" id="bookingDetails"><tr><td align="center" valign="middle" > <b> Date </b></td><td align="center" valign="middle" > <b> From </b> </td><td align="center" valign="middle" > <b> To </b> </td><td align="center" valign="middle" > <b> Machine </b> </td></tr></table>');
		  	for(var i=0;i<data.length;i++){
				  $('#bookingDetails tr:last').after(" <tr> <td>"+data[i].date+" </td> <td> "+data[i].slot.from+" </td><td> "+data[i].slot.to+ "</td><td>"+data[i].machineId+"</td>");	   
		  	}
		}
		else{
			$('#MyBookings').html('No Reservations found!');
		}
			
			//execWs($("#datepicker").val());
	  });
	   
	   //alert("hi");
  }
	 function getUser(){
		 var requestUrl="rest/test/req";
		 $.ajax({
				type: "GET",		
				url:requestUrl ,			
				contentType: "application/html; charset=utf-8",
				dataType: "HTML",
				success: function(arg) {	
					$('#userId').html(arg); 	
				},
				timeout: 30000,
				error: function(request, error) {
				alert( error);
				},
				async: true
				});
	 } 
  </script>
</head>
<body style="font-size:62.5%;">  
<% /*String user= request.getRemoteUser();

 user= user.replaceFirst("ITLINFOSYS\\\\",""); */%>
<div style="height: 80px;text-align: center;border-bottom:thin;border-bottom-style:solid; text-align: center;" id="headerDiv">
<label > <H1> Laundry Machine Booking System </H1>  </label>
</div>
<div style="height:500px;">
<table border="0" > 
	<tr>
		<td colspan="2" align="left" style="font-size: small" >Hello, <label id="userId" ></label></div></td>
	</tr>
	<tr>
		<td colspan="2" align="center" valign="bottom" height="200px" ><div id="datepicker" ></div></td>		
		<td align="center" valign="top" width="200px">
		<a onclick="getMyBookings();" href="javascript:void();" > <b>My Bookings </b> </a>
			<div id="MyBookings" style="overflow:auto;height:190px;">
				<img id="loading" />
			</div> 
		</td>
	</tr>
	<tr> 
		<td width="180px" align="center" valign="top"> 
			<select id="slots" name="slots" >
				<option value="-1">No date selected </option>
			</select> 
		</td>
		<td align="center" valign="top"><button id="book" onclick="bookASlot();" > Book slot </button></td>			
	</tr> 
	
	<tr> <td> <a href="admin.jsp">admin</a>  </td></tr>
</table>
</div>
</body>
</html>